<template>
  <div>
    <s-Header name="我的" ></s-Header>
      <div class="user-panel" >
        <van-skeleton title avatar :row="2" :loading="state.loading" class="panel-skeleton" >
          <img src="https://s.yezgea02.com/1604040746310/aaaddd.png" alt="" class="user-img">
          <div class="user-info">
            <span class="user-info_name">昵称:{{ state.user.nickName }}</span>
            <span class="user-info_tel">登录名称:{{ state.user.loginName}}</span>
            <span class="user-info_desc">个性签名:{{ state.user.introduceSign }}</span>
          </div>
        </van-skeleton>
      </div>

    <van-cell-group >
      <van-cell title="我的订单" is-link to="/order" />
      <van-cell title="账户管理" is-link to="/setting" />
      <van-cell title="地址管理" is-link to="/address?from=mine" />
      <van-cell title="关于我们" is-link to="/welcome" />
    </van-cell-group>
    <p>{{state.numRef0}}</p>
    <p>{{state.numRef}}</p>
    <p>{{state.numRef1.a}}</p>
    <p>{{publishedBooksMessage}}</p>

    <van-button block type="primary" @click="changeRef">
      reactive.ref
    </van-button>
    <p>reactive上初始化或手动挂载ref时,无论ref的值类型,属性被访问或修改时自动解包</p>

    <div ref="container" style="height: 150px;">
      <van-sticky :container="container">
        <van-button type="warning">指定容器</van-button>
      </van-sticky>
    </div>

    <div v-if="false" class="vantabBox">
       <van-tabs v-model:active="activeTab" scrollspy sticky>
          <van-tab v-for="index in 8" :title="'标签 ' + index" :key="index">
            内容 {{ index }}
          </van-tab>
        </van-tabs>
    </div>

    <div style="height:1000px"></div>
     

    <!-- footerTabbar-->
    <!-- 直接使用van-tabbar -->
    <van-tabbar v-model="state.active">
      <van-tabbar-item :to="'/home'" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item :to="'/category'" icon="search" dot>分类</van-tabbar-item>
      <van-tabbar-item :to="'/cart'" icon="friends-o" badge="5">购物车</van-tabbar-item>
      <van-tabbar-item :to="'/user'" icon="setting-o" badge="20">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
  import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted, getCurrentInstance, computed, createVNode, watch, mergeProps } from 'vue'

  import { setLocal, getLocal } from '@/common/js/utils'
  import { getUserInfo } from '@/service/user'
  import { showSuccessToast, showFailToast, showLoadingToast, closeToast } from 'vant'
  import { useRoute, useRouter } from 'vue-router'
  import sHeader from '@/components/SimpleHeader.vue'

  // vant方法使用测试
  import {useLazyRender} from '@/composables/use-lazy-render.js'
  import { mountComponent, usePopupState } from "@/utils/mount-component.mjs";

  // 手动添加div标签到body下面
  function createInstance() {
    const {
      instance,
      unmount
    } = mountComponent({
      setup() {
        const message = ref("");
        const {
          open,
          state,
          close,
          toggle
        } = usePopupState();
        const onClosed = () => {
            unmount();
        };
        const render = () => {
          const attrs = {
            class:'addDiv',
            onClosed,
            "onUpdate:show": toggle
          };
          return createVNode('div', mergeProps(state, attrs), null);
        };
        watch(message, (val) => {
          state.message = val;
        });
        getCurrentInstance().render = render;
        return {
          open,
          close,
          message
        };
      }
    });
    return instance;
  }

  const getInstance = createInstance();
  console.log('getInstance...', getInstance)

  const show = ref(false);
  const lazyRender = useLazyRender(() => show.value );
  console.log('lazyRender...', lazyRender)
  const renderPopup = lazyRender(() => {
      createVNode( 'div', { class: 'bar', innerHTML: 'hello' } );
    });
  console.log('renderPopup...', renderPopup)

  
  const container = ref(null);
  const state = reactive({
    user: {},
    loading: true,
    active:'user',
    activeTab:'1',
    number:10,
    numRef0:ref(100),
    numRef1:ref({a:11,b:22}),
  })

  const publishedBooksMessage = computed(() => {
    return state.numRef0 + 'hahah'
  }) 
  // 获取router实例

  const changeRef = (values)=>{
   state.numRef0 = 22222
   state.numRef = 44444
   state.numRef1.a = 6666
  }
  const router = useRouter()
  // 获取当前组件route
  const route = useRoute()
  onMounted(async() => {
    console.log('container...', container)
    console.log(1111111,state)
    console.log(2222,state.number)
    console.log(3333,state.user)
    state.numRef = ref(200);
    // reactive上初始化或手动挂载ref时,无论ref的值类型,属性被访问或修改时自动解包
    console.log(4444,state.numRef0)
    console.dir(typeof state.numRef0)
    // 简单类型ref打印出来还是简单类型
    console.log(4444,state.numRef)
    // 引用类型ref打印出来为Proxy
    console.log(4444,state.numRef1)
    console.log(4444,state.numRef1.a)
    console.log(5555,ref(888))

    console.log(66666, publishedBooksMessage)
    console.log('instance...',getCurrentInstance().proxy.$router)
    const { data } = await getUserInfo()
    state.loading = false;
    console.log(11111,data)
    state.user = data
  })
</script>
<style >
  .vantabBox .van-tabs{
    height:400px;
    overflow: scroll;    
  }
</style>
<style lang="less">
  .vantabBox{
    // width: 320px;
    // height: 400px;
    // margin:0 auto 300px;
    // display: flex;
    // border: 1px solid;
    // border-radius: 10px;
    // overflow: scroll;

  }
  .van-tabs .van-tab__panel {
    height: 100px;
  }
  .user-panel{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 10px;
    padding: 20px;
    height: 120px;
    background: linear-gradient(90deg, #1baeae, #51c7c7);
    box-shadow: 0 0.05333rem 0.13333rem #269090;
    border-radius: 6px;
    .van-skeleton{
      width:100%;
      padding:10px;
      .van-skeleton-avatar{
        width: 42px;
        height: 42px;
      }
    }
    .user-img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .user-info{
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      padding: 4px 10px;
      color: #fff;
      font-size: 0.37333rem;
    }
  }
  .van-cell-group{
    border: 1px solid #ccc;
    border-radius: 12px;
    overflow: hidden;
    margin: 10px;
    box-shadow: 0 0.05333rem 0.13333rem #bfc1c5;
  }
</style>
